<template>
  <MyHeader></MyHeader>
  <el-container>
    <SiderBar></SiderBar>

    <el-scrollbar height="calc(100vh - 80px)">
      <div class="main">
        <router-view></router-view>
      </div>
    </el-scrollbar>
  </el-container>
</template>

<script setup lang="ts">
import SiderBar from "./components/SiderBar.vue";
import MyHeader from "./components/MyHeader.vue";

import { useStore } from "vuex";

import { getOrganization } from "@/api/organizationManage/index.ts";

const store = useStore();

async function initOptions() {

  const res: IObj = await getOrganization();
  const mapObj: IObj = {};

  res.data.data.forEach((item: IObj) => {
    mapObj[item._id] = item.name;
  });

  if (store.getters.organizationMap === undefined) {
    store.dispatch("initOrganizationMap", mapObj);
  }
  
}

initOptions();

</script>

<style lang="less" scoped>
.main {
  flex: 1;
  width: calc(100vw - 200px);
  // overflow: hidden;
  // width: calc(100% - 200px);
}
</style>
